<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新漫监控平台</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="shortcut icon" href="images/logo1.ico" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.slimscroll.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/common.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/index.js"></script>
</head>
<body class="index-page">
    <img src="images/bg1.jpg" class="bgimg" alt="">
    <div class="contentbox">
        <div class="title">
            <span>后台管理界面</span>
            <span>|</span>
            <span class="small-title">SIMMAX</span>
            <div class="avatar-box">
                <img src="images/bg.jpg" class="avatar" alt="">
                <span class="ava-name"></span>
            </div>
            <div class="setting-box">
                <a href="#">
                    <img src="images/back.png" alt=""> 退出
                </a>
            </div>
        </div>
        <ul class="menu-box">
            <li class="menu1 ">
                <a href="interface.html">连接设备</a>
            </li>
            <li class="menu2 active">
                <a href="index.html">实时监控</a>
            </li>
            <li class="menu6">
                <a href="dataManager.html">数据管理</a>
            </li>
            <li class="menu3">
                <a href="Parameters.html">参数设置</a>
            </li>
            <li class="menu4 ">
                <a href="user.html">用户管理</a>
            </li>
            <li class="menu5">
                <a href="#">帮助</a>
            </li>
            <li class="menu7">
                <a href="systemLog.html">日志管理</a>
            </li>
        </ul>
        <div class="menu-listpictures">
            <img class="listbox" src="images/listbox.png" alt="">
            <img class="listpicture1" src="images/listpicture1.png" alt="">
            <img class="listpicture2" src="images/listpicture2.png" alt="">
        </div>
        <div class="menu-listfixing" id="chooseDeivce">选择设备</div>
        <div class="mainbox">
            <ul class="battery-list clearfix">
                <li class="battery-type active">
                    <div class="battery-img">
                        <img src="images/status.png" alt="">
                    </div>
                    <p>设备状态</p>
                    <div class="battery-type-small battery-type-small2">
                        <div class="size10">
                            <span>设备：</span>
                            <span class="color-green color-green1">0</span>
                        </div>
                    </div>
                </li>
                <li class="battery-type">
                    <div class="battery-img">
                        <img src="images/warn_low.png" alt="">
                    </div>
                    <p>低级预警</p>
                    <div class="battery-type-small battery-type-small2">
                        <div class="size10">
                            <span>设备：</span>
                            <span class="color-green color-green2">0</span>
                        </div>
                    </div>
                </li>
                <li class="battery-type">
                    <div class="battery-img">
                        <img src="images/warn_middle.png" alt="">
                    </div>
                    <p>中级预警</p>
                    <div class="battery-type-small battery-type-small2">
                        <div class="size10">
                            <span>设备：</span>
                            <span class="color-yellow color-yellow1">0</span>
                        </div>
                    </div>
                </li>
                <li class="battery-type">
                    <div class="battery-img">
                        <img src="images/warn_high.png" alt="">
                    </div>
                    <p>高级预警</p>
                    <div class="battery-type-small battery-type-small2">
                        <div class="size10">
                            <span>设备：</span>
                            <span class="color-red color-red1">0</span>
                        </div>
                    </div>
                </li>
                <li class="battery-type">
                    <div class="battery-img">
                        <audio id="audio" src="cnwav.mp3" loop></audio>
                        <img id="alertGif" style="display: none" src="images/warn_high.gif" alt="">
                        <img id="alertPng" src="images/warn_high.png" alt="">
                    </div>
                    <p>报警设备</p>
                    <div class="battery-type-small battery-type-small2">
                        <div class="size10">
                            <span>设备：</span>
                            <span class="color-red color-red2">0</span>
                        </div>
                    </div>
                </li>
                <li class="battery-type">
                    <div class="battery-img">
                        <img src="images/status.png" alt="">
                    </div>
                    <p>数据曲线</p>
                    <div class="battery-type-small">
                        <div class="size10">
                            <a href="#">点击查看</a>
                        </div>
                    </div>
                </li>
            </ul>
            <div id="screenbox">
                <span class="slimTop"></span>
                <span class="slimBottom"></span>
                <div>
                    <!--设备状态-->
                    <ul class="device-list clearfix">
                    </ul>

                    <!-- <ul class="device-list clearfix"> -->
                    <div id="toggleTime"><span>秒</span><span>分</span></div>
                    <div class="selectRealy">选择设备</div>
                    <input type="text" id="threshold">
                    <button id="thresholdbtn">设置阀值</button>

                    <div class="chartbox">
                        <div id="chartbox" style="display:block;z-index:-100;width:90%;min-height:340px;background-color: #fff;position:absolute"></div>
                        <div class="selDevice">
                            <table>
                                <thead>
                                    <tr>
                                        <th>仪器编号</th>
                                        <th>剂量率</th>
                                        <th>选择</th>
                                    </tr>
                                </thead>
                                <tbody id="chart-table">
                                </tbody>
                            </table>
                            <div id="setDeviceId">确认</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="js/myChart.js"></script>
<script>
    $(".device-list").slimScroll({
        height: '360px',
        size: "10px",
        alwaysVisible: true,
        opacity: 1,
        railVisible: true,
        railColor: 'url("images/scroll_bg.png")',
        railOpacity: 1,
        railBorderRadius: "7px",
        railDraggable: true
    });
    var colors = ["#ea0a0a", "#f4b408", "#00a0e9"];
    var level = [1, 2, 3, 4];//等于1为低级；等于2为中级，3高级，等于4是报警,
    var time1, time2, timeflag = false;
    function getList() {
        $(".device-list").parents(".slimScrollDiv").show();
        $.ajax({
            url: apiDomain + indexInformation,
            success: function (data) {
                unlogin(data);
                var deviceRecord = data.data.deviceRecordStatisticVO;
                var dataLength = data.data.list.length;
                var statistic = data.data.statistic;
                $('.color-green1').html(deviceRecord.deviceCount);
                $('.color-green2').html(deviceRecord.lowWarningDeviceCount);
                $(".color-yellow1").html(deviceRecord.middleWarningDeviceCount);
                $('.color-red1').html(deviceRecord.highWarningDeviceCount);
                $('.color-red2').html(deviceRecord.alarmDeviceCount);
                if(deviceRecord.alarmDeviceCount!=0){
                    $('#alertGif').show();
                    $('#alertPng').hide();
                    $('#audio').get(0).play();
                    setTimeout(function(){
                        $('#audio').get(0).pause();
                    },5000);
                }else{
                    $('#alertGif').hide()
                    $('#alertPng').show()
                }
                var data = data.data.list;
                var $device = $('.device-list').find("li.device-item");
                if (dataLength != $device.length) {
                    $('.device-list1').html('');
                    for (var i = 0; i < data.length; i++) {
                        var nicknames=data[i].nickname;
                        if(data[i].nickname==undefined){
                            nicknames='';
                        }
                        var $dev = '';
                        var doserateNum=Math.floor(data[i].doserate * 100) / 100;
                        if(doserateNum<=99.99){
                            $dev=$("<li class='device-item'><div class='size10 device-sty1'>编号" + data[i].deviceId + "</div>" +
                                "<div class='device-progress'><div class='progress'  data-width='" + data[i].battery / 8 * 100 + "'></div></div>" +
                                "<div class='size11 device-sty2'><span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>usv/h</div>" +
                                "<div class='device-sty3'>" + nicknames + "</div></li>")
                        }else if(10000>doserateNum&&doserateNum>100){
                            var nums=doserateNum/1000;
                            var num=Number(nums.toString().match(/^\d+(?:\.\d{0,2})?/));
                            $dev= $("<li class='device-item'><div class='size10 device-sty1'>编号" + data[i].deviceId + "</div>" +
                                "<div class='device-progress'><div class='progress'  data-width='" + data[i].battery / 8 * 100 + "'></div></div>" +
                                "<div class='size11 device-sty2'><span>" + num + "</span>msv/h</div>" +
                                "<div class='device-sty3'>" + nicknames + "</div></li>");
                        }else if(100000000>doserateNum&&doserateNum>=10000){
                            var nums=doserateNum/1000000;
                            var num=Number(nums.toString().match(/^\d+(?:\.\d{0,2})?/));
                            $dev= $("<li class='device-item'><div class='size10 device-sty1'>编号" + data[i].deviceId + "</div>" +
                                "<div class='device-progress'><div class='progress'  data-width='" + data[i].battery / 8 * 100 + "'></div></div>" +
                                "<div class='size11 device-sty2'><span>" + num + "</span>sv/h</div>" +
                                "<div class='device-sty3'>" + nicknames + "</div></li>");
                        }

                        $('.device-list').append($dev);
                        $dev.find(".progress").each(function () {
                            var _val = data[i].battery / 8 * 100;
                            var valWidth = data[i].flagAlarm;
                            $(this).attr("data-width", _val);
                            if (valWidth == level[1]) {
                                $(this).css({
                                    "backgroundColor": colors[1]
                                });
                            } else if (valWidth == level[2]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[3]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[0]) {
                                $(this).css({
                                    "backgroundColor": colors[2]
                                });
                            }
                            $(this).animate({
                                "width": _val + "%"
                            }, 1000);
                        });
                    }
                } else {// 长度相等直接更改数据
                    for (var i = 0; i < data.length; i++) {
                        var nicknames=data[i].nickname;
                        if(data[i].nickname==undefined){
                            nicknames='';
                        }
                        var doserateNum=+Math.floor(data[i].doserate * 100) / 100;
                        if(doserateNum<=99.99){
                            $device.eq(i).find('.device-sty2').html(+doserateNum + "usv/h");
                        }else if(10000>doserateNum&&doserateNum>100){
                            var nums=doserateNum/1000;
                            var num=Number(nums.toString().match(/^\d+(?:\.\d{0,2})?/));
                            $device.eq(i).find('.device-sty2').html(+num + "msv/h")

                        }else if(100000000>doserateNum&&doserateNum>=10000){
                            var nums=doserateNum/1000000;
                            var num=Number(nums.toString().match(/^\d+(?:\.\d{0,2})?/));
                            $device.eq(i).find('.device-sty2').html(+num + "sv/h")

                        }
                        $device.eq(i).find('.device-sty1').html("编号" + data[i].deviceId);

                        $device.eq(i).find('.device-sty3').html(nicknames);
                        $device.eq(i).find(".progress").each(function () {
                            var _val = data[i].battery / 8 * 100;
                            var valWidth = data[i].flagAlarm;
                            $(this).attr("data-width", _val);
                            if (valWidth == level[1]) {
                                $(this).css({
                                    "backgroundColor": colors[1]
                                });
                            } else if (valWidth == level[2]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[3]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[0]) {
                                $(this).css({
                                    "backgroundColor": colors[2]
                                });
                            }
                            $(this).animate({
                                "width": _val + "%"
                            }, 1000);
                        });

                    }
                }
            }
        });
    }
    getList();
    time1 = setInterval(function () {
        getList();
    }, 1000);
    /*点击进行切换*/
    $(".battery-list li").on('click', function (e) {
        $('.device-list').html('');
        $(this).addClass('active').siblings().removeClass('active');
        var _index = $(this).index();
        var $box = $(".chartbox");
        var flag = false;
        clearInterval(time1);
        clearInterval(time2);
        if (_index === 0) {
            $('#threshold,#thresholdbtn').hide();
            $('.menu-listpictures').show();
            $('.menu-listfixing,#toggleTime,.selectRealy').hide();
            $box.css("display", "none");
            getList();
            flag = false;
            time1 = setInterval(function () {
                var _id = $(".battery-type.active").index();
                getList();
            }, 1000);
        } else if (_index === 5) {
            $('#chartbox').css('zIndex', -1);
            $box.css("display", "block");
            $('#threshold,#thresholdbtn').hide();
            $('.menu-listpictures').hide();
            $('.menu-listfixing,.selDevice,#setDeviceId').show();
            $(".device-list").parents(".slimScrollDiv").hide();
            flag = true;
        } else {
            $('#threshold,#thresholdbtn').hide();
            $('.menu-listpictures').show();
            $('.menu-listfixing,#toggleTime,.selectRealy').hide();
            $box.css("display", "none");
            changeList(_index);
            time2 = setInterval(function () {
                var _id = $(".battery-type.active").index();
                changeList(_id);
            }, 1000);
            flag = false;
        }
        getChart(flag);
    });

    function getAlarmData(id) {
        $.ajax({
            url: apiDomain + indexInformation,
            data: { flagAlarm: id },
            success: function (data) {
                unlogin(data);
                var deviceRecord = data.data.deviceRecordStatisticVO;
                var dataLength = data.data.list.length;
                var statistic = data.data.statistic;
                $('.color-green1').html(deviceRecord.deviceCount);
                $('.color-green2').html(deviceRecord.lowWarningDeviceCount);
                $(".color-yellow1").html(deviceRecord.middleWarningDeviceCount);
                $('.color-red1').html(deviceRecord.highWarningDeviceCount);
                $('.color-red2').html(deviceRecord.alarmDeviceCount);
                if(deviceRecord.alarmDeviceCount!=0){
                    $('#alertGif').show();
                    $('#alertPng').hide();
                }else{
                    $('#alertGif').hide();
                    $('#alertPng').show();
                }
                var data = data.data.list;
                var $device = $('.device-list').find("li.device-item");
                if (dataLength != $device.length) {
                    $('.device-list').html('');
                    for (var i = 0; i < data.length; i++) {
                        var nickname=data[i].nickname;
                        if(nickname==undefined){
                            nickname='';
                        }
                        var $dev = $("<li class='device-item'><div class='size10 device-sty1'>编号" + data[i].deviceId + "</div>" +
                            "<div class='device-progress'><div class='progress'  data-width='" + data[i].battery / 8 * 100 + "'></div></div>" +
                            "<div class='size11 device-sty2'><span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>v/h</div>" +
                            "<div class='device-sty3'>" + nickname + "</div></li>");
                        $('.device-list').append($dev);
                        $dev.find(".progress").each(function () {
                            var _val = data[i].battery / 8 * 100;
                            var valWidth = data[i].flagAlarm;
                            $(this).attr("data-width", _val);
                            if (valWidth == level[1]) {
                                $(this).css({
                                    "backgroundColor": colors[1]
                                });
                            } else if (valWidth == level[2]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[3]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[0]) {
                                $(this).css({
                                    "backgroundColor": colors[2]
                                });
                            }
                            $(this).animate({
                                "width": _val + "%"
                            }, 1000);
                        });

                    }
                } else {// 长度相等直接更改数据
                    console.log(10);
                    for (var i = 0; i < data.length; i++) {
                        var nickname=data[i].nickname;
                        if(nickname==undefined){
                            nickname='';
                        }
                        $device.eq(i).find('.device-sty1').html("编号" + data[i].deviceId);
                        $device.eq(i).find('.device-sty2').html(+Math.floor(data[i].doserate * 100) / 100 + "sv/h");
                        $device.eq(i).find('.device-sty3').html(nickname);
                        $device.eq(i).find(".progress").each(function () {
                            var _val = data[i].battery / 8 * 100;
                            var valWidth = data[i].flagAlarm;
                            $(this).attr("data-width", _val);
                            if (valWidth == level[1]) {
                                $(this).css({
                                    "backgroundColor": colors[1]
                                });
                            } else if (valWidth == level[2]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[3]) {
                                $(this).css({
                                    "backgroundColor": colors[0]
                                });
                            } else if (valWidth == level[0]) {
                                $(this).css({
                                    "backgroundColor": colors[2]
                                });
                            }
                            $(this).animate({
                                "width": _val + "%"
                            }, 1000);
                        });

                    }
                }
                timeflag = true;
            }
        });
    }
    function changeList(id) {
        $(".device-list").parents(".slimScrollDiv").show();
        getAlarmData(id);
    }

    // 动态生成表table
    $.ajax({
        url: apiDomain + indexInformation,
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        success: function (data) {
            unlogin(data)
            $('#chart-table').html('');
            data.data.list.forEach(function (el, idx) {
                var doserates=el.doserate;
                if(doserates==undefined){
                    doserates='';
                }
                var tr = $('<tr>').html(' <td>' + el.deviceId + '</td><td>' + Math.floor(doserates * 100) / 100 + '</td><td><input cid="' + el.deviceId + '" type="checkbox"></td>')
                $('#chart-table').append(tr)
            })
        }
    });




    // 选择设备

    var deviceList = [];
    $('#chart-table').on('click', 'tr td input', function (e) {
        deviceList = [];
        $('#chart-table td input:checked').each(function (e) {
            deviceList.push($(this).attr('cid'))
        });
        // console.log(e.currentTarget)
    });

    $('#setDeviceId').click(function () {
        $("#chooseDeivce,.slimTop,.slimBottom,.selDevice").hide();
        $("#toggleTime,.selectRealy").show();
        $("#chartbox").show();
        $('#threshold,#thresholdbtn').show();
        chartData.clearAll();
        $('#chartbox').css('zIndex', 100);
        chartData.deviceList = deviceList;
        myChart.clear();
        chartData.option.series = [];
        chartData.timeLine = [];
        getChart(true);

    });

    $(".selectRealy").on('click', function () {
        $("#chooseDeivce,.slimTop,.slimBottom,.selDevice").show();
        $("#toggleTime,.selectRealy,#chartbox").hide();
        $('#threshold,#thresholdbtn').hide();
        $('#chartbox').css('zIndex', -1);
    });
    $('#toggleTime').click(function () {
        if (chartData.gap == 1000) {
            chartData.gap = 1000 * 60
            chartData.timeFormat = 'm'

        } else {
            chartData.gap = 1000;
            chartData.timeFormat = 's'
        }
        chartData.clearAll();
        myChart.clear()
        chartData.option.series = []
        chartData.timeLine = []
        getChart(true);
    });

    var zindex = 1000;
    var alertDeviceList = [];
    function alertModal(deviceId, val, date) {
        var deviceIds=deviceId,vals=val;
        if(deviceIds==undefined){
            deviceIds='';
        }
        if(vals==undefined){
            vals='';
        }
        if (alertDeviceList.indexOf(deviceId) == -1) {
            alertDeviceList.push(deviceId);
        } else {
            return false;
        }
        zindex++;
        $('body').append('<div  id="deviceId' + deviceId + '" style="z-index:' + zindex + '" class="indexAlert"><input type="hidden" class="deviceflagWarning" value="' + deviceId + '"><div class="alarmWarning">报警警告</div><div class="cancelAlarm"><img onclick="alertClose(this) "class="alert-close" src="images/cancel.png" alt=""></div><div class="identifier">编号' + deviceIds + '达到报警阈值</div><div class="numberIdentifier"><span>' + Math.floor(vals * 100) / 100 + '</span>uSv/h</div><div class="indexNumber">' + date + '</div><div class="pushbutton" onclick="pushRealy(this)">确认</div></div>');
        pushRealy = function (e) {
            var avaName=$('.ava-name').html();
            if(avaName=='游客'){
                return false;
            }else{
                var _this = $(e);
                _this.parents('.indexAlert').remove();
                var deviceId = _this.parents('.indexAlert').find('.deviceflagWarning').val();
                alertDeviceList.splice(alertDeviceList.indexOf(deviceId), 1);
                clearInterval(window.timer);
                $.ajax({
                    url: apiDomain + indexCancel,
                    xhrFields: {
                        withCredentials: true
                    },
                    type: 'POST',
                    crossDomain: true,
                    data: {
                        id: deviceId
                    },
                    success: function (daa) {
                        clearInterval(window.timer);
                        window.getAlert();
                    }
                });
            }

        }
        alertClose = function (e) {
            var avaName=$('.ava-name').html();
            if(avaName=='游客'){
                return false;
            }else{
                var _this = $(e);
                _this.parents('.indexAlert').remove();
                var deviceId = _this.parents('.indexAlert').find('.deviceflagWarning').val();
                alertDeviceList.splice(alertDeviceList.indexOf(deviceId), 1);
                clearInterval(window.timer);
                $.ajax({
                    url: apiDomain + indexCancel,
                    xhrFields: {
                        withCredentials: true
                    },
                    type: 'POST',
                    crossDomain: true,
                    data: {
                        id: deviceId
                    },
                    success: function (daa) {
                        clearInterval(window.timer);
                        window.getAlert()
                    }
                });
            }

        };
    }


    //弹窗监视
    function getAlert() {
        window.timer = setInterval(function () {
            $.ajax({
                url: apiDomain + indexInformation,
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (data) {
                    unlogin(data);
                    data.data.alarmLogList.forEach(function (el) {
                        alertModal(el.deviceId, el.doserate, el.alarmStartTime)
                    })
                }
            })
        }, 2000)
    }
    $(function(){
        getAlert()
    })


    $(document).on('click', '.device-item', function () {
        $('#threshold,#thresholdbtn').show();
        var deviceId = $(this).children('.device-sty1').html().split('编号')[1];
        $('.battery-img:eq(5)').click()
        $td = $('#chart-table td:first-child')
        $td.each(function (idx, el) {
            $(el).siblings().siblings().children('input').attr('checked', false)
            if ($(el).html() == deviceId) {
                $(el).siblings().siblings().children('input').attr('checked', true)
                deviceList = [];
                $('#chart-table td input:checked').each(function (e) {
                    deviceList.push($(this).attr('cid'))
                });
            }
        });
        $('#setDeviceId').click()
    });


    $(document).on('click', '#thresholdbtn', function () {
        chartData.clearAll();
        myChart.clear()
        chartData.option.series = []
        chartData.timeLine = []
        chartData.markline = $('#threshold').val()
        getChart(true);
    })
</script>

</html>